let menu = document.querySelector(".headerLeft");
let menuIcon = document.querySelector(".headerLeft i");

let search = document.querySelector(".headerRight");
let searchIcon = document.querySelector(".headerRight i");


let mask1 = document.querySelector(".mask1");
let mask2 = document.querySelector(".mask2");

let box1 = document.querySelector('.mask1 .box');

// 页面底部节点 事件委托
let footer = document.querySelector("footer");


// 正常情况下页面底部高度
let footerHeight = 5;



menu.addEventListener("click", function() {
	if (menuIcon.classList.contains('icon-caidan')) {
		mask1.style.clipPath = "circle(95%)";
		
		menuIcon.style.color = "#d576ba";
		menu.style.background = "#fff";
		menuIcon.classList.remove('icon-caidan');
		menuIcon.classList.add('icon-closel');
		search.style.transform = 'scale(0)';
		mask2.style.transform = 'scale(0)';
	
	} else {
		// mask1.style.clipPath = `circle(${radius}vw at ${positionX}% ${positionY}vw)`;
		mask1.style.clipPath = ``;
		menuIcon.style.color = "#fff";
		menu.style.background = "#b972ce";
		menuIcon.classList.remove('icon-closel');
		menuIcon.classList.add('icon-caidan');
		search.style.transform = 'scale(1)';
		mask2.style.transform = 'scale(1)';
	}

});

search.addEventListener("click", function() {	
	if (searchIcon.classList.contains('icon-sousuo')) {
		mask2.style.clipPath = "circle(75%)";
		searchIcon.style.color = "#d576ba";
		search.style.background = "#fff";
		searchIcon.classList.remove('icon-sousuo');
		searchIcon.classList.add('icon-closel');
		menu.style.transform = 'scale(0)';
		mask1.style.transform = 'scale(0)';
	} else {
		mask2.style.clipPath = "";
		searchIcon.style.color = "#fff";
		search.style.background = "#d576ba";
		searchIcon.classList.remove('icon-closel');
		searchIcon.classList.add('icon-sousuo');
		menu.style.transform = 'scale(1)';
		mask1.style.transform = 'scale(1)';
	}
});



footer.addEventListener("click", function(event) {
	// 网页可见区域宽 用来协助响应式
	let offsetWidth = document.body.offsetWidth;
	if (offsetWidth <= 767) {
		footerHeight = 11;
	} else if (offsetWidth <= 2339 && offsetWidth >= 1025) {
		footerHeight = 5;
	}

	footerF(event.target.id);
});




// 渲染底部
function footerF(ID){
	
	let footerStr = '';
	switch(ID){
		case 'up':
			footer.style.height = `${footerHeight*2.4}vw`;
			// console.log(footer.style.height)
			footer.style.marginTop = `${-footerHeight*2.4}vw`;
			footer.style.transition = 'all .3s';
			footerStr += `
				<div class="content1">
					<div class="left">
						<h2>Receive the latest Or news and Creativity in our newsletters.</h2>
						<form action="" method="">
							<input type="email" name="" id="login" value="" placeholder='enter address'/>
							<label for="login">Sign Up</label>
						</form>
					</div>
					<div class="right">
						<i class="iconfont icon-xinlangweibo"></i>
						<i class="iconfont icon-weixin"></i>
						<i class="iconfont icon-baidu"></i>
						<i class="iconfont icon-facebookfacebook52"></i>
						<i class="iconfont icon-xiajiantou" id="down"></i>
					</div>
				</div>
				<p>Copyright (c) Nissin Furniture Crafters Co ,Ltd All Rights Reserved</p>
			`;
			footer.innerHTML = footerStr;
		break;
		
		case 'down':
			footer.style.height = `${footerHeight}vw`;
			footer.style.marginTop = `${-footerHeight}vw`;
			footer.style.transition = 'all .3s';
			footerStr += `
				<div class="content">
					<h2>Copyright (c) Nissin Furniture Crafters Co ,Ltd All Rights Reserved</h2>
					<i class="iconfont icon-shangjiantou" id="up"></i>
				</div>
			`;
			footer.innerHTML = footerStr;
		break;
	}
	
}
